<template>

  <div class="zt">
    <div class="login" v-loading="loading">
      <div class="huanying">欢迎回来</div>
      <el-form :inline="false" :model="form" :rules="rules" class="demo-form-inline" ref="yanzheng">
        <el-form-item label="" prop="username">
          <el-input v-model="form.username" placeholder="姓名"></el-input>
        </el-form-item>
        <el-form-item label="" prop="password">
          <el-input v-model="form.password" placeholder="密码"></el-input>
        </el-form-item>
        <el-form-item label="" prop="">
          <el-input v-model="form.code" placeholder="验证码" tyle="width: 65%;display: inline-block;"></el-input>
          <div style="display: inline-block;">
            <img :src="codeUrl" @click="getCode" class="login-code-img" />
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login(form)" class="loginbtn">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>

</template>
<style>
  .zt{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255,255,0,0.1);
  }
  .login{
    width: 15%;
    background-color: rgba(12,19,23,0.45);
    padding: 25px 15px 20px 15px;
  }
  .loginbtn{
    width: 100%;
  }
  .huanying{
    width: 100%;
    color: white;
    display: flex;
    justify-content: center;
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 15px;
  }
</style>
<script>

import request from "../utils/request";

export default {
  name: 'Login',
  components: {

  },
  data(){
    return{
      codeUrl: "",
      loading: false,
      form: {
        username: '',
        password: '',
        code: "",
        uuid: ""
      },
      rules: {
        username:
          [
            { required: true, message: '请输入账户姓名'},
          ],
        password:
          [
            { required: true, message: '请输入账户密码'}
          ],
      },
    }
  },
  mounted(){
    this.getCode();
  },
  methods:{
    login(){
      this.$refs["yanzheng"].validate(valid => {
        if (valid) {
          var that = this;
          that.loading = true;
          request.get("/videoWeb/login",{
            params:this.form,
          }).then(res =>{
            setTimeout(function (){
              that.loading = false;
            }, 300);
            if(res.code == 100){
              this.$message({
                showClose: true,
                message: '登录成功!',
                type: 'success'
              });
              localStorage.Authorization = res.Authorization;
              setTimeout(function (){
                that.$router.push({path:"/index"});
              }, 300);
            }else if(res.code == 104){
              this.$message({
                showClose: true,
                message: '用户名或密码错误!',
                type: 'error'
              });
              this.getCode();
            }else if(res.code == 500){
              this.$message({
                showClose: true,
                message: res.message,
                type: 'error'
              });
              this.getCode();
            }
          })
        }else {
          return false;
        };
      });
    },
    getCode ()
    {
      request.get("/videoWeb/captcha", {
          params: {},
      }).then(res =>
      {
        this.codeUrl = "data:image/gif;base64," + res.img;
        this.form.uuid = res.uuid;
      });
    },
  },
}
</script>
